import React from 'react';
import { ReactFlowProvider, MiniMap, ReactFlow } from '@xyflow/react';
import './style.less'
import { NodeTypes } from '../../CustomNode';
import { NodeColor } from '@/constant';

const MinimapViewer = ({ nodes, edges, width = 200, height = 200 }) => {
    // 使用内部状态管理节点和边
    return (
        <div className='minimap-viewer' style={{
            height: '100%',
            width: '100%',
            borderRadius: 4,
            overflow: 'hidden'
        }}>
            <ReactFlowProvider>
                <ReactFlow
                    nodes={nodes}
                    edges={edges}
                    fitView
                    panOnDrag={false}  // 禁用拖拽平移
                    zoomOnPinch={false} // 禁用缩放
                    zoomOnScroll={false}
                    nodesDraggable={false}
                    nodesConnectable={false}
                    elementsSelectable={false}
                    defaultViewport={{ x: 0, y: 0, zoom: 1 }}
                    nodeTypes={NodeTypes}
                    proOptions={{ hideAttribution: true }}
                >
                    <MiniMap
                        pannable={false}
                        zoomable={false}
                        nodeColor={NodeColor}
                        style={{ backgroundColor: '#f3f3f3', width, height }}
                    />
                    {/* 完全隐藏Controls和其他交互元素 */}
                </ReactFlow>
            </ReactFlowProvider>
        </div>
    );
};

export default MinimapViewer;